<template>
  <div class="zb-pro-table">
    <div class="header">
      <el-form :inline="true" class="search-form" :model="formInline" ref="ruleFormRef">
        <template v-for="(item, index) in formSearchData" :key="index">
          <el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
            <template v-if="item.valueType === 'input'">
              <el-input
                v-model="formInline[item.name]"
                :placeholder="`请输入${item.label}`"
                maxlength="64"
              />
            </template>
            <template v-if="item.valueType === 'select'">
              <el-select
                style="width: 200px"
                v-model="formInline[item.name]"
                :placeholder="`请选择${item.label}`"
                @change="onSubmit"
              >
                <el-option
                  v-for="ite in item.options"
                  :key="ite.value"
                  :label="ite.label"
                  :value="ite.value"
                />
              </el-select>
            </template>
          </el-form-item>
        </template>
      </el-form>
      <div class="search">
        <el-button type="primary" @click="exportExcelAction" v-if="$props.excel">
          <el-icon style="margin-right: 6px"><Download /></el-icon>导出 Excel
        </el-button>
        <el-button type="primary" @click="add" v-if="$props.unadd">
          <el-icon><plus /></el-icon> 添加
        </el-button>
        <el-button type="primary" @click="downloadTemplate" v-if="$props.ifTemplate">
          <el-icon><Download /></el-icon> 示例文件
        </el-button>
        <el-button type="primary" @click="uploadExcel" v-if="$props.ifUpload">
          <el-icon><Upload /></el-icon> 上传文件
        </el-button>
        <el-button
          type="primary"
          @click="handleAll"
          v-if="$props.ifInputData && formInline.processed === 0 && props.data?.list?.length > 0"
        >
          <el-icon><Paperclip /></el-icon> 全部处理
        </el-button>
        <el-button
          type="primary"
          @click="inputData"
          v-if="$props.ifInputData && formInline.processed === 1"
        >
          <el-icon><Paperclip /></el-icon> 批量手动处理
        </el-button>
        <el-button type="primary" @click="inputData" v-if="$props.ifDataInput">
          <el-icon><Paperclip /></el-icon> 批量数据处理
        </el-button>
        <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button link type="primary" @click="isExpand = !isExpand"
          >{{ isExpand ? '合并' : '展开'
          }}<el-icon>
            <arrow-down v-if="!isExpand" />
            <arrow-up v-else /> </el-icon
        ></el-button>
      </div>
    </div>
    <!----------底部---------------------->
    <div class="footer">
      <!-----------工具栏操作工具----------------->
      <div class="operator">
        <slot name="btn"></slot>
      </div>
      <!-- ------------表格--------------->
      <div class="table">
        <el-table
          class="zb-table"
          v-loading="loading"
          @selection-change="(val) => emit('selection-change', val)"
          :data="props.data?.list"
          :border="true"
          style="width: 100%"
        >
          <template v-for="(item, index) in columns" :key="index">
            <el-table-column
              v-if="item.type && item.itemIf"
              :type="item.type"
              :width="item.width"
              :align="item.align != null ? item.align : 'center'"
              :fixed="item.fixed"
              :label="item.label"
            />
            <el-table-column
              v-if="item.name === 'state' && item.itemIf"
              :prop="item.name"
              :width="item.width"
              :align="item.align != null ? item.align : 'center'"
              :fixed="item.fixed"
              :label="item.label"
            >
              <template #default="scope">
                <el-switch
                  inline-prompt
                  active-text="启用"
                  inactive-text="禁用"
                  v-model="scope.row.state"
                  @change="changeStatus(scope.row.id, scope.row.state, 'state')"
                />
              </template>
            </el-table-column>
            <el-table-column
              v-if="item.name === 'status' && item.itemIf"
              :prop="item.name"
              :width="item.width"
              :align="item.align != null ? item.align : 'center'"
              :fixed="item.fixed"
              :label="item.label"
            >
              <template #default="scope">
                <el-switch
                  inline-prompt
                  active-text="启用"
                  inactive-text="禁用"
                  v-model="scope.row.status"
                  @change="changeStatus(scope.row.id, scope.row.status, 'status')"
                />
              </template>
            </el-table-column>
            <el-table-column
              v-if="item.name === 'position' && item.itemIf && item.showType === 'tag'"
              :prop="item.name"
              :width="item.width"
              :align="item.align != null ? item.align : 'center'"
              :fixed="item.fixed"
              :label="item.label"
            >
              <template #default="scope">
                <el-tag type="success">{{ scope.row.position }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              v-if="item.name === 'isRequired' && item.itemIf"
              :prop="item.name"
              :width="item.width"
              :align="item.align != null ? item.align : 'center'"
              :fixed="item.fixed"
              :label="item.label"
            >
              <template #default="scope">
                <el-switch
                  inline-prompt
                  active-text="是"
                  inactive-text="否"
                  v-model="scope.row.isRequired"
                  @change="changeStatus(scope.row.id, scope.row.isRequired, 'isRequired')"
                />
              </template>
            </el-table-column>
            <el-table-column
              v-if="item.name === 'enabled' && item.itemIf"
              :prop="item.name"
              :width="item.width"
              :align="item.align != null ? item.align : 'center'"
              :fixed="item.fixed"
              :label="item.label"
            >
              <template #default="scope">
                <el-switch
                  inline-prompt
                  active-text="启用"
                  inactive-text="禁用"
                  v-model="scope.row.enabled"
                  @change="changeStatus(scope.row.id, scope.row.enabled, 'enabled')"
                />
              </template>
            </el-table-column>
            <el-table-column
              v-if="item.name === 'isDelete' && item.itemIf"
              :prop="item.name"
              :width="item.width"
              :align="item.align != null ? item.align : 'center'"
              :fixed="item.fixed"
              :label="item.label"
            >
              <template #default="scope">
                <el-switch
                  inline-prompt
                  active-text="启用"
                  inactive-text="作废"
                  :active-value="false"
                  :inactive-value="true"
                  v-model="scope.row.isDelete"
                  @change="changeStatus(scope.row.id, scope.row.isDelete, 'isDelete')"
                />
              </template>
            </el-table-column>
            <el-table-column
              v-if="
                item.name === 'processed' &&
                item.itemIf &&
                item.showType === 'tag' &&
                !item.failType
              "
              :prop="item.name"
              :width="item.width"
              :align="item.align != null ? item.align : 'center'"
              :fixed="item.fixed"
              :label="item.label"
            >
              <template #default="scope">
                <el-tag :type="scope.row.processed === 0 ? 'danger' : 'success'">{{
                  scope.row.processed === 0 ? '未处理' : '已处理'
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              v-if="
                item.name === 'processed' && item.itemIf && item.showType === 'tag' && item.failType
              "
              :prop="item.name"
              :width="item.width"
              :align="item.align != null ? item.align : 'center'"
              :fixed="item.fixed"
              :label="item.label"
            >
              <template #default="scope">
                <el-tag :type="scope.row.processed === 0 ? 'warning' : 'danger'">{{
                  scope.row.processed === 0 ? '未处理' : '处理失败'
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              v-if="item.name === 'pointInfo' && item.itemIf"
              :prop="item.name"
              :width="item.width"
              :align="item.align != null ? item.align : 'center'"
              :fixed="item.fixed"
              :label="item.label"
            >
              <template #default="scope">
                <div
                  >{{ scope.row.pointName }}【{{
                    scope.row.pointTime ? scope.row.pointTime : '未定'
                  }}】后{{ scope.row.dayNumber }}天</div
                >
              </template>
            </el-table-column>
            <el-table-column
              v-if="item.itemIf && item.showType === 'tooltip'"
              :prop="item.name"
              :width="item.width"
              :align="item.align != null ? item.align : 'center'"
              :fixed="item.fixed"
              :label="item.label"
            >
              <template #default="scope">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="数据可能存在问题，请修改"
                  placement="top"
                  v-if="scope.row.number === 0"
                >
                  <el-icon class="icon" color="red"><WarningFilled /></el-icon>
                </el-tooltip>
                {{ scope.row.number }}
              </template>
            </el-table-column>
            <el-table-column
              v-if="!item.itemIf"
              :prop="item.name"
              :width="item.width"
              :align="item.align != null ? item.align : 'center'"
              :fixed="item.fixed"
              :label="item.label"
            >
              <template #default="scope">
                <span v-if="!item.slot">{{
                  item.moneyType ? numberFormat(scope.row[item.name]) : scope.row[item.name]
                }}</span>
                <slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
      <!-- ------------分页--------------->
      <div class="pagination">
        <el-pagination
          v-model:currentPage="formInline.pageNum"
          :page-size="formInline.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[15, 30, 45, 60, 75, 90, 105]"
          :total="data?.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { Search } from '@element-plus/icons-vue'
  import { numberFormat } from '@/utils/numberFormat.ts'
  import type { FormInstance } from 'element-plus'
  const ruleFormRef = ref<FormInstance>()
  const emit = defineEmits([
    'reset',
    'onSubmit',
    'add',
    'change',
    'exportExcelAction',
    'uploadExcel',
    'inputData',
    'selection-change',
    'handleAll',
    'downloadTemplate',
  ])
  let props = defineProps({
    columns: {
      default: () => [],
    },
    data: {
      type: Object,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    unadd: {
      type: Boolean,
      default: true,
    },
    ifUpload: {
      type: Boolean,
      default: false,
    },
    ifInputData: {
      type: Boolean,
      default: false,
    },
    ifDataInput: {
      type: Boolean,
      default: false,
    },
    ifTemplate: {
      type: Boolean,
      default: false,
    },
    excel: {
      type: Boolean,
    },
  })

  // 收缩展开
  const isExpand = ref(false)
  const handleSizeChange = (val) => {
    formInline.pageSize = val
    formInline.pageNum = 1
    emit('onSubmit', formInline)
  }
  const handleCurrentChange = () => {
    emit('onSubmit', formInline)
  }

  import { reactive } from 'vue'

  let obj = { pageSize: 15, pageNum: 1 }
  let search = []
  for (let item of props.columns) {
    if (item.inSearch) {
      obj[item.name] = null
    }
    if (item.inSearch) {
      search.push(item)
    }
  }
  const formSearchData = ref(search)
  const formInline = reactive(obj)

  const onSubmit = () => {
    emit('onSubmit', formInline)
  }

  const reset = () => {
    formSearchData.value.forEach((item) => {
      formInline[item.name] = null
    })
    emit('reset')
  }
  const add = () => {
    emit('add')
  }
  const uploadExcel = () => {
    emit('uploadExcel')
  }
  const inputData = () => {
    emit('inputData')
  }
  const downloadTemplate = () => {
    emit('downloadTemplate')
  }
  const exportExcelAction = () => {
    emit('exportExcelAction')
  }

  const changeStatus = (id, enabled, str) => {
    emit('change', id, enabled, str)
  }

  const handleAll = () => {
    emit('handleAll')
  }

  defineExpose({
    formInline,
    onSubmit,
  })
</script>
<style scoped lang="scss">
  .edit-input {
    padding-right: 100px;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
  .zb-pro-table {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .header {
      display: flex;
      padding: 16px 16px 0 16px;
      margin-bottom: 16px;
      border-radius: 4px;
      background: white;
      box-shadow: 0 0 12px rgb(0 0 0 / 5%);
      .search-form {
        flex: 1;
        ::v-deep {
          .el-input--default {
            width: 200px;
          }
        }
      }
      .search {
        flex-shrink: 0;
        white-space: nowrap;
      }
    }
    .footer {
      flex: 1;
      display: flex;
      padding: 16px;
      flex-direction: column;
      border-radius: 4px;
      overflow: hidden;
      background: white;
      box-shadow: 0 0 12px rgb(0 0 0 / 5%);
      min-height: 300px;
      .operator {
        margin-bottom: 15px;
      }
      .table {
        position: relative;
        flex: 1;
      }
      .zb-table {
        position: absolute;
        height: 100%;
      }
    }
    ::v-deep {
      .el-table__header th {
        font-size: 15px;
        font-weight: 700;
        color: #252525;
      }
    }
    .pagination {
      width: 100%;
      display: flex;
      justify-content: center;
      padding-top: 20px;
      box-sizing: border-box;
    }
  }
</style>
